<template>
  <!-- 导入表 -->
  <el-dialog title="生成数据库文档" :visible.sync="visible" width="800px" top="5vh" append-to-body>
    <!-- 生成弹窗 -->
      <el-form :model="queryParams" ref="queryForm" :inline="true"  v-show="pdfVisible == false">
       <el-form-item label="数据源" prop="dataSourceId">
                  <el-select v-model="dataSourceId" placeholder="默认数据源" clearable size="small">
                    <el-option label="默认数据源" value="default" />
                    <el-option
                        v-for="dataSource in dataSourceList"
                        :key="dataSource.id"
                        :label="dataSource.sourceName"
                        :value="dataSource.id"
                        @click="handleQuery" >
                    </el-option>
                  </el-select>
      </el-form-item>
     <el-form-item label="模板" prop="templateList">
                  <el-select v-model="templateId" placeholder="选择模板" clearable size="small">
                    <el-option
                        v-for="template in templateList"
                        :key="template.id"
                        :label="template.templateName"
                        :value="template.id"
                        @click="handleQuery" >
                    </el-option>
                  </el-select>
      </el-form-item>
      <el-form-item label="表名称" prop="tableName">
        <el-input
          v-model="queryParams.tableName"
          placeholder="请输入表名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="表描述" prop="tableComment">
        <el-input
          v-model="queryParams.tableComment"
          placeholder="请输入表描述"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
      <el-row v-show="pdfVisible == false">
      <el-table @row-click="clickRow" ref="table" :data="dbTableList" @selection-change="handleSelectionChange" height="260px">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="tableName" label="表名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="tableComment" label="表描述" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间"></el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-row>
      <div slot="footer" class="dialog-footer" v-show="pdfVisible == false">
        <el-button type="primary" @click="previewsDataBasePdf">预览文档</el-button>
        <el-button type="primary" @click="generateDataBasePdf">生成PDF</el-button>
        <el-button type="primary" @click="generateDataBaseDocx">生成DOCX</el-button>
        <el-button type="primary" @click="generateDatabase">生成ZIP</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>

    <!-- 预览pdf弹窗 -->
      <el-button-group v-show="pdfVisible">
        <el-button type="primary" icon="el-icon-close" size="mini" @click="backGenerate">返 回</el-button>
        <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一页</el-button>
        <el-button type="primary" size="mini" @click="nextPage">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
      </el-button-group>
      <div style="marginTop: 10px; color: #409EFF" v-show="pdfVisible">{{ pageNum }} / {{ pageTotalNum }}</div>
      <pdf v-show="pdfVisible"
        :page="pageNum"
        :src="url"
        @progress="loadedRatio = $event"
        @num-pages="pageTotalNum=$event"
        ></pdf>

  </el-dialog>
</template>

<script>
import { listDbTable} from "@/api/tool/gen";
import { templateAll} from "@/api/template/template";
import { listDatasource } from "@/api/datasource/datasource";
import { downLoadPost, downLoadGet } from "@/utils/download";
import pdf from 'vue-pdf'
export default {
  components: { pdf },
  data() {
    return {
      // 遮罩层
      visible: false,
      // 显示pdf预览内容
      pdfVisible: false,
      // 选中数组值
      tables: [],
      // 总条数
      total: 0,
      // 表数据
      dbTableList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        tableName: undefined,
        tableComment: undefined,
        dataSourceId: 'default'
      },
      dataSourceId: 'default',
      dataSourceList: [],
      templateList: [],
      templateId: '',
      //pdf
      url: 'http://image.cache.timepack.cn/nodejs.pdf',
      pageNum: 1,
      pageTotalNum: 1, // 总页数
      loadedRatio: 0, // 当前页面的加载进度，范围是0-1 ，等于1的时候代表当前页已经完全加载完成了
    };
  },
  methods: {
    // 显示弹框
    show() {
      this.getDataSourceList();
      this.getList();
      this.visible = true;
      /** 查询模板列表 */
      const query = {}
      templateAll(query).then(response => {
        this.templateList = response.data;
      });
    },
    clickRow(row) {
      this.$refs.table.toggleRowSelection(row);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.tables = selection.map(item => item.tableName);
    },
    // 查询表数据
    getList() {
      const params = this.queryParams;
      params.dataSourceId = this.dataSourceId;
      listDbTable(params).then(res => {
        if (res.code === 200) {
          this.dbTableList = res.data;
          this.total = res.total;
        }
      });
    },
    // 查询所有数据源
    getDataSourceList(){
      const param = {
        state : 0
      }
      listDatasource(param).then(res => {
        if (res.code === 200) {
          this.dataSourceList = res.data;
        }
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 生成zip按钮操作 */
    generateDatabase() {
      const param = {
        tables: this.tables.join(","),
        dataSourceId: this.dataSourceId,
        templateId: this.templateId
      }
      console.log(param,'param')
      downLoadPost("/code/gen/generateDatabaseDocZip", param, 'zip');
    },
    /** 生成doc按钮操作 */
    generateDataBaseDocx(){
      const param = {
        tables: this.tables.join(","),
        dataSourceId: this.dataSourceId,
        templateId: this.templateId
      }
      downLoadPost("/code/gen/generateDataBaseDocx", param, 'word');
    },
    /** 生成pdf按钮操作 */
    generateDataBasePdf(){
      downLoadGet('/code/gen/showDatabasePdf' + '?dataSourceId=' + this.dataSourceId + '&tables=' + this.tables.join(",") + '&templateId=' + this.templateId,'pdf');
    },
    /** 预览pdf */
    previewsDataBasePdf(){
      const baseUrl = process.env.VUE_APP_BASE_API
      this.url = baseUrl + '/code/gen/showDatabasePdf' + '?dataSourceId=' + this.dataSourceId + '&tables=' + this.tables.join(",") + '&templateId=' + this.templateId
      this.pdfVisible = !this.pdfVisible
      console.log("url", this.url)
    },
    // 上一页
    prePage() {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },
    // 下一页
    nextPage() {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    },
    backGenerate(){
      this.pdfVisible = !this.pdfVisible
    }
  }
};
</script>
